<template>
    <div style="width: 100%; height: 100%">
        <div class="box">
            <div>
                <div class="btns">
                    <el-dropdown @command="addHandle">
                        <el-button>
                            新增
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-show="item?.show()" v-for="item in dropdown" :key="item.label" :command="item.type">{{ item.label }}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- <el-button @click="addB">修改</el-button> -->
                    <el-button v-for="item in buttons" :key="item.label" v-show="item.show()" @click="item.click()">{{ item.label }}</el-button>
                </div>
                <div style="height: calc(100% - 62px); border-top: 1px solid #0e76f1; margin: 0 20px">
                    <el-tree :data="partList" :props="defaultProps" @node-click="handleNodeClick" highlight-current node-key="id" :expand-on-click-node="false" default-expand-all ref="tree">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <div style="display: flex; align-items: center">
                                <img style="margin-right: 5px" :src="require(`@/assets/sensor/${data.type}.png`)" />
                                {{ node.label }}
                            </div>
                        </span>
                    </el-tree>
                </div>
            </div>
            <div>
                <el-card style="height: 100%" class="box-card">
                    <div slot="header" class="clearfix">
                        <span>部件信息</span>
                    </div>
                    <div style="height: 100%; padding: 10px; font-weight: 600">
                        <div style="height: 24px" v-for="item in details[select.type]" :key="item.name" class="text item">{{ item.label }}:{{ select[item.name] }}</div>
                        <div style="height: 24px" v-if="select.type === 1" v-for="item in bearingDetails" :key="item.name" class="text item">{{ item.label }}:{{ select.bearing[item.name] }}</div>
                    </div>
                </el-card>
            </div>
        </div>
        <el-dialog
            class="nopadding"
            :title="partForm.children ? '修改部件名' : '新增部件'"
            v-if="isShow"
            :visible.sync="isShow"
            :width="partForm.type === 0 || partForm.children ? '500px' : '1000px'"
            top="12vh"
            size="mini"
            :close-on-click-modal="false"
        >
            <div v-if="partForm.type === 0 || partForm.children">
                <div style="height: 50px; padding: 20px 20px 10px">
                    <el-form label-width="100px" :model="partForm">
                        <el-form-item label="部件名称："><el-input v-model="partForm.name"></el-input></el-form-item>
                    </el-form>
                </div>
            </div>
            <div v-else-if="partForm.type === 1">
                <div style="position: relative; height: 400px; width: 100%">
                    <zy-table :tableData="bearingList" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeRow="changeRow"></zy-table>
                </div>
                <div style="height: 50px; padding: 20px 20px 10px">
                    <el-form label-width="100px" :model="partForm">
                        <el-form-item label="部件名称："><el-input v-model="partForm.name"></el-input></el-form-item>
                    </el-form>
                </div>
            </div>
            <div v-else-if="partForm.type === 2">
                <div style="padding: 20px 20px 10px">
                    <el-form label-width="120px" style="display: flex; flex-wrap: wrap" :model="partForm">
                        <el-form-item style="width: 50%" label="齿轮箱类型：">
                            <el-select v-model="number" @change="change">
                                <el-option v-for="(item, index) in ['一', '二', '三', '四']" :key="index" :label="item + '级平行轴'" :value="index + 1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width: 50%" label="齿轮箱名称："><el-input v-model="partForm.name"></el-input></el-form-item>
                    </el-form>

                    <el-table :data="tableData">
                        <el-table-column label="驱动齿轮数" width="319">
                            <template slot-scope="scope">
                                <div class="subItem4">
                                    <el-input-number v-show="scope.$index !== tableData.length - 1" style="width: 100%" :min="1" v-model="scope.row.qu"></el-input-number>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="轴名称" width="319">
                            <template slot-scope="scope">
                                <div class="subItem4">
                                    <el-input style="width: 100%" v-model="scope.row.name"></el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="从动齿轮数" width="319">
                            <template slot-scope="scope">
                                <div class="subItem4">
                                    <el-input-number v-show="scope.$index !== 0" style="width: 100%" :min="1" v-model="scope.row.cong"></el-input-number>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isShow = false">取 消</el-button>
                <el-button type="primary" @click="partForm.children ? editPart() : addPart()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import { deepClone } from '@/plugins/clone'
import { column } from './formConfig.js'
import zyTable from '@/components/common/zyTable.vue'

export default {
    data() {
        return {
            isShow: false,
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            partList: [],
            bearingList: [],
            tableColumn: [],
            pagination: {},
            number: 1,
            tableData: [
                {
                    qu: 1,
                    name: '齿轮箱轴_1',
                    cong: 1,
                },
                {
                    qu: 1,
                    name: '齿轮箱轴_2',
                    cong: 1,
                },
            ],
            queryForm: {
                size: 10,
                page: 1,
            },
            dropdown: [
                {
                    label: '轴',
                    type: 0,
                    show: () => true,
                },
                {
                    label: '轴承',
                    type: 1,
                    show: () => JSON.stringify(this.select) !== '{}' && this.select.type === 0,
                },
                {
                    label: '齿轮箱',
                    type: 2,
                    show: () => true,
                },
            ],
            buttons: [
                {
                    label: '修改部件名',
                    show: () => JSON.stringify(this.select) !== '{}',
                    click: () => {
                        this.partForm = this.select
                        this.isShow = true
                    },
                },
                {
                    label: '设为转速轴',
                    // show: () => JSON.stringify(this.select) !== '{}' && [0, this.partList.length - 1].includes(this.partList.findIndex((item) => item.id === this.select.id)) && this.select.type === 0,
                    show: () => JSON.stringify(this.select) !== '{}' && this.select.pid === 0 && this.select.type === 0,
                    click: () => this.setSpeed(),
                },
                {
                    label: '删除',
                    show: () => JSON.stringify(this.select) !== '{}',
                    click: () => this.deletePart(),
                },
            ],
            partForm: {
                type: 0,
                name: '',
                device_id: 0,
                gearCount: null,
                speed_ratio: 0,
                bearing: {},
                isSpeed: 0,
                pid: 0,
            },
            partFormC: {},
            select: {},
            node: null,
            bearing: [],
            details: {
                0: [
                    {
                        name: 'name',
                        label: '部件名',
                    },
                    {
                        name: 'isSpeed',
                        label: '是否为转速轴',
                    },
                    {
                        name: 'speed_ratio',
                        label: '转速比',
                    },
                ],
                1: [
                    {
                        name: 'name',
                        label: '部件名',
                    },
                    {
                        name: 'speed_ratio',
                        label: '转速比',
                    },
                ],
                2: [
                    {
                        name: 'name',
                        label: '部件名',
                    },
                    {
                        name: 'speed_ratio',
                        label: '转速比',
                    },
                ],
                3: [
                    {
                        name: 'name',
                        label: '部件名',
                    },
                    {
                        name: 'gearCount',
                        label: '齿数',
                    },
                    {
                        name: 'speed_ratio',
                        label: '转速比',
                    },
                ],
                4: [
                    {
                        name: 'name',
                        label: '部件名',
                    },
                    {
                        name: 'gearCount',
                        label: '齿数',
                    },
                    {
                        name: 'speed_ratio',
                        label: '转速比',
                    },
                ],
            },
            bearingDetails: [
                {
                    name: 'bl_model',
                    label: '轴承型号',
                },
                {
                    name: 'bl_bpfi',
                    label: '内圈故障频率',
                },
                {
                    name: 'bl_bpfo',
                    label: '外圈故障频率',
                },
                {
                    name: 'bl_bsf',
                    label: '滚动体故障频率',
                },
                {
                    name: 'bl_ftfi',
                    label: '保持架故障频率',
                },
            ],
        }
    },
    components: {
        zyTable,
    },
    props: {
        device_id: {
            type: Number,
            default() {
                return 0
            },
        },
    },
    methods: {
        setSpeed() {
            let id = this.select.id
            requestApi('post', 'part/setSpeed', { id, device_id: this.select.device_id }).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.partForm = deepClone(this.partFormC)
                    this.getPart()
                }
            })
        },
        change(num) {
            this.tableData = []
            for (let i = 0; i < num + 1; i++) {
                this.tableData.push({
                    qu: 1,
                    name: '齿轮箱轴_' + (i + 1),
                    cong: 1,
                })
            }
        },
        handleNodeClick(data, node) {

            this.select = data
            this.node = node
        },
        changeRow(row) {
            this.partForm.bearing = row

        },
        addHandle(type) {
            this.partForm = deepClone(this.partFormC)
            this.partForm.type = type
            if (type === 1) this.partForm.pid = this.select.id
            this.isShow = true
        },
        addPart() {
            this.isShow = false
            let partForm = deepClone(this.partForm)
            partForm.bearing = JSON.stringify(partForm.bearing)
            requestApi('post', 'part/add', { form: partForm, children: this.tableData }).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.partForm = deepClone(this.partFormC)
                    this.getPart()
                }
            })
        },
        editPart(data) {
            this.isShow = false
            let partForm = deepClone(this.partForm)
            partForm.bearing = JSON.stringify(partForm.bearing)
            partForm.isSpeed = partForm.isSpeed === '是' ? 1 : 0
            delete partForm.children
            requestApi('post', 'part/edit', partForm).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.partForm = deepClone(this.partFormC)
                    this.getPart()
                }
            })
        },
        getChildren(node) {
            let list = []
            let dg = (n, list) => {
                list.push(n.data)
                if (n.childNodes.length !== 0) {
                    n.childNodes.map((item) => dg(item, list))
                } else {
                    return
                }
            }
            dg(node, list)
            return list
        },
        deletePart() {
            let id = this.getChildren(this.node).map((item) => item.id)
            this.$confirm('确定要删除该部件及子部件吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', 'part/delete', { id, device_id: this.select.device_id }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            this.getPart()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        addB() {
            this.bearing.map((item) => {
                requestApi('post', `bearing/add`, item).then((res) => {})
            })
        },
        getPart() {
            requestApi('post', `part/getlist`, { device_id: this.device_id }).then((res) => {
                if (res.data.code == 0) {
                    this.partList = res.data.data
                    // if (this.partList.length !== 0) {
                    //     this.select = this.partList[0]
                    // }
                }
            })
        },
        changePage(e) {
            this.queryForm.page = e
            this.getBearing()
        },
        getBearing() {
            requestApi('post', `bearing/getlist`, this.queryForm).then((res) => {
                if (res.data.code == 0) {
                    this.bearingList = res.data.data
                    this.pagination = res.data.pagination
                }
            })
        },
    },
    computed: {
        operate() {
            return parseInt(sessionStorage.getItem('operate')) === 1
        },
    },
    watch: {
        device_id: {
            handler(newVal, oldVal) {
                this.partForm.device_id = this.device_id
                this.partFormC = deepClone(this.partForm)
                this.getPart()
                this.select = {}
            },
        },
    },
    created() {
        this.partForm.device_id = this.device_id
        this.partFormC = deepClone(this.partForm)
        this.tableColumn = column
        this.getPart()
        this.getBearing()
    },
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 97% !important;
    display: flex;
    .box > div {
        width: 50%;
        height: 100%;
        border: 1px solid #0e76f1;
        border-radius: 5px;
        margin: 10px 5px;
        .btns {
            flex: 1;
            display: flex;
            height: 60px;
            display: flex;
            align-items: center;
            .el-button {
                margin-left: 20px;
                height: 30px;
                background-color: #007bff;
                border-color: #007bff;
                color: white;
                display: flex;
                padding: 7px 20px !important;
                justify-content: center !important;
            }
        }
    }

    .el-card {
        border: 1px solid #253d84;
        background-color: #132454;
        color: #c6d9fa;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .subItem4 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }
}
</style>
